<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="MyBatisCodeHelper.png" sizes="32x32">
  <title>MyBatisCodeHelper交流群</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/3.2.2/echarts.min.js"></script>
  <script src="../js/echarts-wordcloud.js"></script>
  <style>
      html, body, #main {
          width: 100%;
          height: 100%;
          margin: 0;
      }
  </style>
</head>
<body>
<div id="main"></div>
<script>
  function getData(url, fn, option) {
    var oDefault = {
      type: "get",
      url: url,
      success: fn,
      error: function (data) {
        console.log('error123', data);
      }
    };
    if (option) {
      $.extend(true, oDefault, option);
    }
    $.ajax(oDefault);
  }


  getData('wordcloud.json', function (data) {
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
      title: {
        text: 'MyBatisCodeHelper交流群',
        x: 'center',
        textStyle: {
          fontSize: 23
        }

      },
      backgroundColor: '#F7F7F7',
      tooltip: {
        show: true
      },
      toolbox: {
        feature: {
          saveAsImage: {
            iconStyle: {
              normal: {
                color: '#FFFFFF'
              }
            }
          }
        }
      },
      series: [{
        name: '关键词',
        type: 'wordCloud',
        //size: ['9%', '99%'],
        sizeRange: [10, 130],
        //textRotation: [0, 45, 90, -45],
        rotationRange: [-45, 90],
        //shape: 'circle',
        textPadding: 0,
        autoSize: {
          enable: true,
          minSize: 6
        },
        textStyle: {
          normal: {
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: data
      }]
    });
  })

</script>
</body>
</html>